import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入rem基准单位
import 'lib-flexible/flexible'


// 引入vant组件
import {
  Button,
  Tabbar,
  TabbarItem,
  Search,
  Icon,
  Popup,
  Toast,
  NavBar,
  Rate,
  List,
  Progress,
  Overlay,
  Empty,
  SwipeCell,
  Dialog,
  Tab,
  Tabs,
  Sidebar,
  SidebarItem,
  TreeSelect,
  Divider,
  Swipe,
  SwipeItem
} from 'vant';

Vue
  .use(Button)
  .use(Tabbar)
  .use(TabbarItem)
  .use(Search)
  .use(Icon)
  .use(Popup)
  .use(Toast)
  .use(NavBar)
  .use(Rate)
  .use(List)
  .use(Progress)
  .use(Overlay)
  .use(Empty)
  .use(SwipeCell)
  .use(Dialog)
  .use(Tab)
  .use(Tabs)
  .use(Sidebar)
  .use(SidebarItem)
  .use(TreeSelect)
  .use(Divider)
  .use(Swipe)
  .use(SwipeItem)

  import axios from 'axios'
  import VueAxios from 'vue-axios'
  
  // 默认基本地址s
  axios.defaults.baseURL = 'http://novel.kele8.cn/'
  
  // 默认请求超时
  axios.defaults.timeout = 30000;
  
  // 添加请求拦截器
  axios.interceptors.request.use(config => {
    // 添加数据请求时的加载提示
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      // 展示时长（0表示不会自动关闭，需要调用方法关闭）
      duration: 0
    });
    // 一定要返回config（config是请求或返回的数据）
    return config;
    // 对请求错误做些什么
  }, error => {
    // 关闭加载提示
    Toast.clear();
    return Promise.reject(error);
  });
  
  // 添加响应拦截器
  axios.interceptors.response.use(response => {
    // 关闭加载提示
    Toast.clear();
    return response;
    // 对响应错误做点什么
  }, error => {
    Toast.clear();
    return Promise.reject(error);
  });
  
Vue.use(VueAxios, axios)
  
Vue.filter('formatDate', (value, format) => {
  //value: 需要进行格式化的数据
  //format: 日期的格式
  // ('', 'yyyy-MM-dd hh:mm:ss') ==> 2021-10-20 12:20:30
  // ('', 'yyyy/MM/dd hh:mm:ss') ==> 2021/10/20 12:20:30
  // ('', 'yyyy/MM/dd') ==> 2021/10/20
  // ('', 'hh:mm:ss') ==> 12:20:30
  // 生成时间
  let dt = new Date(value);
  // 获取年份
  let year = dt.getFullYear();
  // 如果格式中存在y的字符串
  if (/(y+)/.test(format)) {
    // RegExp是正则表达式构造函数
    // RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个以()分组的字符串
    let tag = RegExp.$1;
    // 年份转换成字符串
    // 年份裁剪（总长度减去目标字符串长度得到裁剪范围，然后裁剪字符串，返回值为被裁减后的字符串）
    // 格式的年份有多少位就格式化多少位
    year = year.toString().slice(4 - tag.length);
    // 然后替换格式里的年份
    format = format.replace(tag, year);
  }
  // 创建一个时间对象
  let dateObj = {
    M: dt.getMonth() + 1,
    d: dt.getDate(),
    h: dt.getHours(),
    m: dt.getMinutes(),
    s: dt.getSeconds()
  };
  // 循环替换format
  for (let key in dateObj) {
    // 根据key动态生成正则表达式
    let reg = new RegExp(`(${key}+)`);
    // 匹配正则找到目标字符串
    if (reg.test(format)) {
      let tag = RegExp.$1;
      // 然后格式化时间对象
      // 通过长度判断是否需要在十位数以下的数字拼接上0
      let item = dateObj[key] >= 10 ? dateObj[key] : tag.length === 2 ? '0' + dateObj[key] : dateObj[key];
      // 然后再替换format
      format = format.replace(tag, item);
    }
  }
  // 然后返回格式化之后的时间
  return format;
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
